import AMap from 'AMap'
var map
var contentOpen = (item) => {
  return `<div class="map-marker flex">
    <div class="line flex-row" ><i class="eyes el-icon-view"></i><span class="name">${item.name}</span><span class="data"><em>${item.jieDanNum}/</em>${item.peiSongNum}</span></div>
    <div class="sjdw"><div class="sj"></div><div class="dw"></div></div></div>`
}
var contentClose = (item) => {
  return `<div class="map-marker flex">
    <div class="line flex-row"><i class="eyes el-icon1-erp-close-eye"></i><span class="name">${item.name}</span><span class="data"><em>${item.jieDanNum}/</em>${item.peiSongNum}</span></div>
    <div class="sjdw"><div class="sj"></div><div class="dw"></div></div></div>`
}
export default {
  methods: {
    gaodeMap() { //初始化地图
      map = new AMap.Map('container-dd', {
        resizeEnable: true, zoom: 16,
        center: [116.397428, 39.90923] //初始化地图中心点
      })
      AMap.plugin(['AMap.ToolBar', 'AMap.Scale'], function () {
        map.addControl(new AMap.ToolBar())
        map.addControl(new AMap.Scale())
      })
    },
    gooleMap() { // 谷歌地图
      map = new google.maps.Map(document.getElementById('container-dd'), {
        center: { lat: -34.397, lng: 150.644 },
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        zoom: 16
      })
    },
    createShopMarker(item, content, zIndex, setMap, setCenter, isClose) { // 创建骑手
      let marker = null
      if (this.isChina) {
        marker = new AMap.Marker({
          position: [item.longitude, item.latitude],
          offset: new AMap.Pixel(-30, -45),
          content,
          zIndex
        })
        AMap.event.addListener(marker, 'click', () => {
          if (isClose) this.colseOneShopperMarker(item)
          else this.markerClick(item)
        })
        if (setCenter) map.setCenter([item.longitude, item.latitude])
        if (setMap) marker.setMap(map)
      } else {
        marker = new RichMarker({
          position: new google.maps.LatLng(item.latitude, item.longitude),
          content,
          zIndex,
          anchor: new google.maps.Size(-30, -45)
        })
        google.maps.event.addListener(marker, 'click', () => {
          if (isClose) this.colseOneShopperMarker(item)
          else this.markerClick(item)
        })
        if (setCenter) map.setCenter(new google.maps.LatLng(item.latitude, item.longitude))
        if (setMap) marker.setMap(map)
      }

      return marker
    },
    createOrderLine(item, dashed) { // 创建订单路线
      let marker1 = null
      let marker2 = null
      let polyline = null
      if (this.isChina) {
        marker1 = new AMap.Marker({
          map, position: [item.diaoDuToLng, item.diaoDuToLat],
          icon: 'assets/img/marker_song.png',
          offset: new AMap.Pixel(-15, -42),
        })
      } else {
        marker1 = new google.maps.Marker({
          map, position: new google.maps.LatLng(item.diaoDuToLat, item.diaoDuToLng),
          icon: {
            url: "assets/img/marker_song.png",
            size: new google.maps.Size(32, 42),
            origin: new google.maps.Point(0, 0),
            anchor: new google.maps.Point(15, 42)
          }
        })
      }
      if (item.fromType == 'NEARBY') {
        return [marker1]
      } else {
        if (this.isChina) {
          marker2 = new AMap.Marker({
            map, position: [item.diaoDuFromLng, item.diaoDuFromLat],
            icon: 'assets/img/marker_shou.png',
            offset: new AMap.Pixel(-15, -42),
          })
          const line = [[item.diaoDuToLng, item.diaoDuToLat], [item.diaoDuFromLng, item.diaoDuFromLat]]
          polyline = new AMap.Polyline({ map, path: line, strokeColor: "#6d7278", strokeOpacity: 0.8, strokeWeight: 2, strokeStyle: dashed ? "dashed" : 'sloid' })
        } else {
          marker2 = new google.maps.Marker({
            map, position: new google.maps.LatLng(item.diaoDuFromLat, item.diaoDuFromLng),
            icon: {
              url: "assets/img/marker_shou.png",
              size: new google.maps.Size(32, 42),
              origin: new google.maps.Point(0, 0),
              anchor: new google.maps.Point(15, 42)
            }
          })
          const lineSymbol = { path: 'M 0,-1 0,1', strokeOpacity: 1, scale: 3 }
          const line = [{ lng: parseFloat(item.diaoDuToLng), lat: parseFloat(item.diaoDuToLat) }, { lng: parseFloat(item.diaoDuFromLng), lat: parseFloat(item.diaoDuFromLat) }]
          const params = { map, path: line, geodesic: true, strokeColor: '#6d7278', strokeOpacity: dashed ? 0 : 0.8, strokeWeight: 2 }
          if (dashed) params.icons = [{ icon: lineSymbol, offset: '0', repeat: '20px' }]
          polyline = new google.maps.Polyline(params)
        }
        return [marker1, marker2, polyline]
      }
    },
    getZindex(marker) { // 获取Zindex
      if (this.isChina) return marker.getzIndex()
      else return marker.getZIndex()
    },
    setMapMarker(marker) { // 在地图上设置标记
      if (this.isChina) map.add(marker)
      else marker.setMap(map)
    },
    removeMarker(marker, isDiyMarker) { // 在地图上删除标记
      if (this.isChina) map.remove(marker)
      else {
        if (isDiyMarker) {
          marker.forEach(list => list.setMap(null))
        } else {
          marker.onRemove()
        }
      }
    },
    hideMarker(marker) { // 在地图上删除标记
      if (this.isChina) marker.hide()
      else marker.setVisible(false)
    },
    wsShoper(item) {  //处理websocker骑手更新
      const indexMarker = this.shoperMarkers.ids.indexOf(item.id)
      if (indexMarker > -1) { // 上班的骑手
        const zIndex = this.getZindex(this.shoperMarkers.markers[indexMarker])
        const markerOpen = this.createShopMarker(item, contentOpen(item), zIndex) // 正常标记骑手
        const markerClose = this.createShopMarker(item, contentClose(item), zIndex, false, false, true) // 正常标记
        if (item.working == '1') { // 依然上班
          this.removeMarker(this.shoperMarkers.markers[indexMarker])
          this.shoperMarkers.markers[indexMarker] = markerOpen
          this.setMapMarker(markerOpen)
          if (this.openShopOrderId) { // 地图骑手标记有骑手被点击
            this.hideMarker(markerOpen)
            if (this.openShopOrderId == item.id) { // 更新的骑手刚好是被点击的骑手
              this.removeMarker(this.openShopOrder)
              this.openShopOrderId = item.id
              this.openShopOrder = markerClose
              this.setMapMarker(markerClose)
              if (this.openShopOrderList.length) {
                this.openShopOrderList.forEach(list => this.removeMarker(list, true))
                this.openShopOrderList = []
              }
              if (item.paotuiRecords.length > 0) { //显示当前骑手下的订单直线图
                item.paotuiRecords.forEach(item => {
                  const markers = this.createOrderLine(item, true)
                  this.openShopOrderList.push(markers)
                })
              }
            }
          }
          const s = this.shopworkList.workingList.findIndex(i => i.id == item.id)
          if (s > -1) this.shopworkList.workingList.splice(s,1, item)
        } else { // 骑手上班变下班
          if (this.openShopOrderId) { // 地图骑手标记有骑手被点击
            if (this.openShopOrderId == item.id) { // 更新的骑手刚好是被点击的骑手
              this.removeMarker(this.openShopOrder)
              this.openShopOrderId = null
              this.openShopOrder = null
              if (this.openShopOrderList.length) {
                this.openShopOrderList.forEach(list => this.removeMarker(list, true))
                this.openShopOrderList = []
              }
            } else {
              this.removeMarker(this.shoperMarkers.markers[indexMarker])
            }
          } else { // 骑手全部展示的时候 更新其中一个骑手
            this.removeMarker(this.shoperMarkers.markers[indexMarker])
          }
          this.shoperMarkers.ids.splice(indexMarker, 1)
          this.shoperMarkers.markers.splice(indexMarker, 1)
          this.shopworkList.noWorkingList.push(item)
          this.shopworkList.noWorkingNum += 1
          this.shopworkList.workingList.forEach((list, index) => {
            if (item.id == list.id) this.shopworkList.workingList.splice(index, 1)
          })
          this.shopworkList.workingNum += -1
        }
      } else { // 新骑手
        if (item.working == '1') { // 下班变上班
          const markerOpen = this.createShopMarker(item, contentOpen(item), 101) // 正常标记骑手
          this.setMapMarker(markerOpen)
          if (this.openShopOrderId) this.hideMarker(markerOpen)
          this.shoperMarkers.ids.push(item.id)
          this.shoperMarkers.markers.push(markerOpen)
          this.shopworkList.workingList.push(item)
          this.shopworkList.workingNum += 1
          this.shopworkList.noWorkingList.forEach((list, index) => {
            if (item.id == list.id) {
              this.shopworkList.noWorkingList.splice(index, 1)
              this.shopworkList.noWorkingNum += -1
            }
          })
        } else { // 骑手下班的还在更新他妹妹
          const noWork = this.shopworkList.noWorkingList.findIndex(i => i.id == item.id)
          if (noWork === -1) {
            this.shopworkList.noWorkingList.push(item)
            this.shopworkList.noWorkingNum += 1
          }
        }
      }
    },
    wsOrder(item) { //处理订单更新
      const curIndex = this.orders.list1.findIndex(list => item.id == list.id)
      //更新的订单 在列表内
      console.log(curIndex)
      if (curIndex > -1) {
        const markerCurIndex = this.curlistOrder.ids.indexOf(item.id)
        //状态修改，删除标记  |调度只显示付款状态 更新到订单就删除
        if (markerCurIndex > -1) {
          this.curlistOrder.ids.splice(markerCurIndex, 1)
          this.curlistOrder.order.splice(markerCurIndex, 1)
          if (this.isChina) map.remove(this.curlistOrder.markers[markerCurIndex])
          else this.curlistOrder.markers[markerCurIndex].forEach(item =>item.setMap(null))
          this.curlistOrder.markers.splice(markerCurIndex, 1)
        }
        this.orders.list1.splice(curIndex, 1)
      } else { // 付款状态才显示
        if (this.capStatus(item.status) === 2) this.orders.list1.push(item)
      }
    },
    colseOneShopperMarker() { //关闭骑手个人标记
      if (this.isChina) map.remove(this.openShopOrder)
      else this.openShopOrder.onRemove()
      this.openShopOrder = null  //清除个人骑手地图标记
      this.openShopOrderId = null
      if (this.openShopOrderList.length > 0) {
        this.openShopOrderList.forEach(list => {
          if (this.isChina) map.remove(list)
          else list.forEach(s => s.setMap(null))
        })
      }
      this.openShopOrderList = []  //清除个人骑手订单标记数据
      this.shoperMarkers.markers.forEach(list => {
        if (this.isChina) list.show()
        else list.setVisible(true)
      })
      if (this.curlistOrder.markers.length > 0) { //恢复订单直线图
        this.curlistOrder.markers.forEach((list, index) => {
          if (this.isChina) map.add(this.curlistOrder.markers[index])
          else list.forEach(e => e.setMap(map))
        })
      }
    },
    markerClick(item) { //点击骑手标记，显示该骑手和骑手下面的订单
      this.shoperMarkers.markers.forEach(list => {
        if (this.isChina) list.hide()
        else list.setVisible(false)
      })
      if (this.curlistOrder.markers.length > 0) { //隐藏订单数据标记
        this.curlistOrder.markers.forEach((list, index) => {
          if (this.isChina) map.remove(this.curlistOrder.markers[index])
          else list.forEach(e => e.setMap(null))
        })
      }
      // 一个独立的骑手标记
      const marker = this.createShopMarker(item, contentClose(item), 101, true, true, true)
      this.openShopOrderId = item.id
      this.openShopOrder = marker
      if (item.paotuiRecords && item.paotuiRecords.length > 0) { //显示当前骑手下的订单直线图
        item.paotuiRecords.forEach(item => {
          const markers = this.createOrderLine(item, true)
          this.openShopOrderList.push(markers)
        })
      }
    },
    curhandShoper(item) { //点击菜单骑手
      this.curShoperMsg = item
      this.curlistShoper = item.id
      //关闭个人骑手标记
      if (this.openShopOrder) this.colseOneShopperMarker(item)
      const index = this.shoperMarkers.ids.indexOf(item.id)
      if (this.isChina) {
        this.shoperMarkers.markers.forEach(list => list.setzIndex(101))
        this.shoperMarkers.markers[index].setzIndex(102)
        map.setCenter([item.longitude, item.latitude])
      } else {
        this.shoperMarkers.markers.forEach(list => list.setZIndex(101))
        this.shoperMarkers.markers[index].setZIndex(102)
        map.setCenter(new google.maps.LatLng(item.latitude, item.longitude))
      }
    },
    showShoper() { //骑手标记
      if (this.shoperMarkers.markers.length > 0) {
        if (this.isChina) map.remove(this.shoperMarkers.markers)
        else this.shoperMarkers.markers.forEach(item => item.onRemove())
        this.shoperMarkers.ids = []
      }
      this.shopworkList.workingList.forEach((item, index) => {
        if (index === 0) {
          if (this.isChina) map.setCenter([item.longitude, item.latitude])
          else map.setCenter(new google.maps.LatLng(item.latitude, item.longitude))
        }
        const marker = this.createShopMarker(item, contentOpen(item), 101, true)
        this.shoperMarkers.markers.push(marker)
        this.shoperMarkers.ids.push(item.id)
      })
    },
    orderLine(item) {  //显示订单线
      let index = this.curlistOrder.ids.indexOf(item.id)
      if (index >= '0') {
        if (this.isChina) map.remove(this.curlistOrder.markers[index])
        else this.curlistOrder.markers[index].forEach(list => list.setMap(null))
        this.curlistOrder.ids.splice(index, 1)
        this.curlistOrder.order.splice(index, 1)
        this.curlistOrder.markers.splice(index, 1)
      } else { // 商家标记
        const marker = this.createOrderLine(item)
        this.curlistOrder.markers.push(marker)
        this.curlistOrder.ids.push(item.id)
        this.curlistOrder.order.push(item)
      }
    }
  },
  mounted() {
    if (this.isChina) {
      this.gaodeMap()
    } else {
      google.maps.event.addDomListener(window, 'load', this.gooleMap())
    }
  }
}
